import BannerAnim from 'rc-banner-anim';
import TweenOne, {TweenOneGroup} from 'rc-tween-one';
import React, {Fragment} from 'react';
import 'rc-banner-anim/assets/index.css';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import css from './index.less';
import ClassList from 'components/classList';
import {FEED} from 'utils/feedFunc';


import toCard from 'assert/img/toCard.png';
import toHome from 'assert/img/toHome.png';
import hand from 'assert/img/hand.png';
import bg1 from 'assert/img/bg1.png';
import bg2 from 'assert/img/bg2.png';
import bg3 from 'assert/img/bg3.png';
// import bg4 from 'assert/img/bg4.png';

const {Element, Arrow, Thumb} = BannerAnim;
const BgElement = Element.BgElement;

let INTERVAL = 1000 * 60 * 0.1;
if (__DEV__) { // 线下
  INTERVAL = 1000 * 60 * 0.1;
}

export default class Slider extends React.Component {

  static propTypes = {
    getClass: PropTypes.func,
  };

  static defaultProps = {
    sliderData: [
      {
        img: bg1,
        id: '561657192566',
      },
      {
        img: bg2,
        id: '523354970060',
      },
      {
        img: bg3,
        id: '17013020860',
      },
      // {
      //   img: bg4,
      //   id: '522558956699',
      // },
    ],
  };


  constructor(props) {
    super(props);
    this.state = {
      showClass: false,
      showInd: 0,
    };
    this.banner = React.createRef();

  }

  componentDidMount() {
    this.timer = setTimeout(() => this.banner.next(), INTERVAL);
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
    this.timer = null;
  }

  startAutoPlay = () => {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.banner.next();
    }, INTERVAL);
  };

  onChange = (type, int) => {
    this.startAutoPlay();
    this.setState({
      showInd: int,
    });
  };

  renderItem = (item, index) => {
    // const {showClass} = this.state;
    // console.log('showClass===', showClass);
    // let img = showClass ? item.imgOpen : item.img;

    const bgImgProps = {
      className: css.bannerUseElemBg,
      src: item.img,
      onClick: (e) => {
        e.stopPropagation();
        this.props.switchRoute('Page');
        this.props.getId(item.id);
        this.props.getClass(index === 3 ? 2 : 1); // 只有第4个轮播对应第二个分类，其他都是第一分类
        // FEED('');
      }
    };

    return (
      <Element prefixCls={css.bannerUseElem} key={`ele_img_${index}`}>
        <BgElement className={css.bannerUseElemBg} key={`img_Bg_${index}`}>
          <img key={`imgBgIn_${index}`} {...bgImgProps}/>
        </BgElement>
        {
          this.renderToGuaGua()
        }
        {
          this.renderHand()
        }
      </Element>
    );
  };

  renderToGuaGua = () => {
    const tweenOneProps = {
      className: css.guaWrapper,
      style: {
        left: 1080,
      },
      animation: {
        duration: 1000,
        delay: 1000,
        type: 'to',
        left: 630,
      },
      onClick: () => {
        this.props.switchRoute('ScrapCard');
        FEED('');

      }
    };
    return (
      <TweenOne {...tweenOneProps} key = "tweenOne">
        <img className={css.img1} src={toCard}/>
      </TweenOne>


    );
  };
  renderHand = () => {
    const tweenOneProps = {
      className: css.guaWrapper2,
      style: {
        top: -200,
      },
      animation: {
        duration: 0,
        delay: 3000,
        type: 'to',
        top: 560,
      },
      onClick: () => {
        this.props.switchRoute('ScrapCard');
        FEED('');
      }
    };

    return (
      <TweenOne {...tweenOneProps} key = "tweenOne2">
        <img className={css.img2} src={hand}/>
      </TweenOne>


    );
  };

  getClass = (ind) => {
    this.props.getClass(ind);
    if (ind !== 0) {
      this.props.switchRoute('Page');
    }
  };

  // isOpen = (show) => {
  //   // console.log('show===', show);
  //   if (!show) {
  //     setTimeout(() => {
  //       this.setState({
  //         showClass: !show,
  //       });
  //     }, 20000);
  //   } else {
  //     this.setState({
  //       showClass: !show,
  //     });
  //   }
  // };

  render() {

    const {sliderData, itemDetail,switchRoute = () => {},} = this.props;
    // console.log('itemDetail==1111=', itemDetail);

    const classProps = {
      getClass: this.getClass.bind(this),
      // isOpen: this.isOpen.bind(this),
      showInd: this.state.showInd,
      itemDetail: itemDetail,
    };

    return (
      <div style={{position: 'relative'}}>
        <BannerAnim
          prefixCls={css.bannerUser}
          ref={r => {
            this.banner = r;
          }}
          onChange={this.onChange}
          key="ban1"
          // duration={450}
          // type="across"
          // type="grid"
        >
          {
            sliderData.map((item, index) => {
              return this.renderItem(item, index);
            })
          }
          <Arrow arrowType="prev" key="prev"/>
          <Arrow arrowType="next" key="next"/>
          <Thumb prefixCls={css.userThumb} key="thumb">
            {sliderData.map((item, i) => <span key={i}/>) }
          </Thumb>
        </BannerAnim>

        <ClassList {...classProps}/>
        <img src={toHome} onClick={() => switchRoute('Home')} className={css.goHome}/>

      </div>

    );
  }
}
